<template>
  <div class="app-container"
       >
       <!-- 1.搜索框 -->
       <el-row :gutter="20">
          <el-col :span="6" :md="8" :sm="12" :xs="18">
            <el-input
              v-model="search"
              size="large"
              placeholder="搜索你想了解的英雄"
              :disabled="searchLoading"
            />
          </el-col>
          <el-col :span="2">
            <el-button @click="searchHero" :loading="searchLoading">搜索</el-button>
          </el-col>
       </el-row>
       <!-- 2.1 推荐英雄 -->
        <h2>推荐英雄</h2>
         <el-row :gutter="20" v-loading="recommendDataLoading">
         <el-col :lg="4" :md="6" :sm="8" :xs="12" v-for="(item, index) in recommendData" :key="index" style="margin-bottom: 10px;">
           <HeroSmallCard :key="index" :data="item" :clickCard="clickHeroItem"/>
         </el-col>
        </el-row>

       <!-- 2.2 搜索得出英雄 -->
       <div v-if="searchHeroData">
        <h2>搜索结果:请你选择需要展示的英雄</h2>
         <el-row :gutter="20" v-loading="searchDataLoading">
         <el-col :lg="4" :md="6" :sm="8" :xs="12" v-for="(item, index) in searchHeroData" :key="index" style="margin-bottom: 10px;">
           <HeroSmallCard :key="index" :data="item" :clickCard="clickHeroItem"/>
         </el-col>
        </el-row>
       </div>
       <!-- 3.图数据展示 -->
       <el-row v-loading="graphLoading" v-show="graphLoading">
        <div style="height:200px;"></div>
       </el-row>
       <el-row style="margin-top: 20px;" v-if="heroKGChartData">
        <el-col :span="12" :xs="24">
          <GraphEChart :data="heroKGChartData"/>
        </el-col>
        <el-col :span="12" :xs="24">
          <HeroDetailDescription :data="currentHeroData"/>
        </el-col>
       </el-row>
  </div>
</template>

<script>
import { getRecommendHeroData, getRelationshipByHeroName, getHeroByKeyword } from '@/api/hero'
import HeroSmallCard from './HeroSmallCard'
import GraphEChart from '@/components/GraphEChart'
import HeroDetailDescription from './HeroDetailDescription'
import { convertRelationshipDataToEChartData } from '@/echart/convertKGData'
export default {
  components: {
    HeroSmallCard,
    GraphEChart,
    HeroDetailDescription,
  },
  data() {
    return {
      search: '',
      recommendDataLoading: false,
      graphLoading: false,
      searchLoading: false,
      recommendData: [],
      graphData: [],
      // 英雄知识图表需要的数据
      heroKGChartData: null,
      // 英雄属性图表需要的数据
      currentHeroData: null,

      // 搜索得出的数据
      searchDataLoading: false,
      searchHeroData: null
    }
  },
  created() {
    this.fetchRecommendData()
  },
  methods: {
    // 获取后端数据
    async fetchRecommendData() {
      this.recommendDataLoading = true
      const res = await getRecommendHeroData()
      this.recommendDataLoading = false
      this.recommendData = res.data
    },
    async fetchRelationshipDataByHeroName(heroName) {
      const params = {
        heroName,
      }
      this.heroKGChartData = null
      const res = await getRelationshipByHeroName(params)
      this.setGraphDataAndSetEChartGraphData(res?.data)
    },
    async fetchHeroDataByKeyword(keyword) {
      const params = {
        keyword
      }
      this.heroKGChartData = null
      const { data = null, success = false } = await getHeroByKeyword(params)
      this.searchLoading = false
      if(!success) {
        this.$message.error("未搜索到")
      } else {
        this.searchHeroData = data
      }
    },
    setGraphDataAndSetEChartGraphData(data) {
      // 初始图数据
      this.graphData = data?.relationships
      // 当前节点的数据
      this.currentHeroData = data?.node
      // 需要的知识图谱数据
      this.heroKGChartData = convertRelationshipDataToEChartData(this.graphData)
      this.graphLoading = false
    },

    // 点击事件
    clickHeroItem(item) {
      this.graphLoading = true
      const heroName = item.name
      this.fetchRelationshipDataByHeroName(heroName)
    },
    searchHero() {
      this.searchLoading = true
      this.searchHeroData = null
      this.fetchHeroDataByKeyword(this.search)
    }
  }
}
</script>

<style scoped>
.graph {
  margin-top: 20px;
}
</style>
